<template>
  <div class="form-designer" style="width: 100%">
    <el-row justify="space-between">
      <el-col :span="4">
        <widget-panel></widget-panel>
      </el-col>
      <el-col :span="15">
        <toolbar-panel></toolbar-panel>
        <form-widget></form-widget>
      </el-col>
      <el-col :span="5">
        <setting-panel></setting-panel>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { provide, reactive } from 'vue'
import { Designer } from './designer'
import formWidget from './form-widget/index.vue'
import settingPanel from './setting-panel/index.vue'
import toolbarPanel from './toolbar-panel/index.vue'
import widgetPanel from './widget-panel/index.vue'
const state = reactive({
  designer: new Designer({
    widgetList: JSON.parse(localStorage.getItem('widgetList') ?? '[]'),
    formConfig: JSON.parse(localStorage.getItem('formConfig') ?? '{}')
  })
})
provide('designer', state.designer)
// window.addEventListener('beforeunload', () => {
//   localStorage.setItem('formJSON', JSON.stringify(state.designer))
// })
// onMounted(() => {
//   if (localStorage.getItem('formJSON')) {
//     const formJSON = JSON.parse(localStorage.getItem('formJSON') ?? '{}')
//     state.designer.widgetList = formJSON.widgetList
//     state.designer.formConfig = formJSON.formConfig
//   }
// })
</script>
